{% extends "base.html" %}

{% block title %}Pixels API Documentation{% endblock %}
{% block head %}
    <meta charset="utf-8"> <!-- Important: rapi-doc uses utf8 charecters -->
    <script type="module" src="https://unpkg.com/rapidoc/dist/rapidoc-min.js"></script>
    <style>
    :root {
        --tip-red: #b70627;
        --dark-bg: #090E14;
        --burple: #7289DA;
    }
    rapi-doc::part(section-navbar) { /* <<< targets navigation bar  */
        box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
        -webkit-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
        -moz-box-shadow: 0px 0px 5px 1px rgba(0,0,0,0.75);
    }
    </style>
{% endblock %}
{% block content %}
    <rapi-doc
        spec-url = "/openapi.json"
        theme = "dark"
        render-style = "read"
        show-header = 'false'
        show-header=""
        bg-color="#23272A"
        text-color="#F3F4F6"
        font-size="large"
        nav-bg-color=""
        nav-text-color=""
        nav-hover-bg-color=""
        nav-hover-text-color=""
        nav-accent-color="#7289DA"
        primary-color="#7289DA"
        sort-tags="true"
        >
        <div slot="nav-logo" style="display: flex; align-items: center; justify-content: center;">
            <img src="https://raw.githubusercontent.com/python-discord/branding/main/logos/logo_circle/logo_circle.png" style="width:40px; margin-right: 20px; border-radius: 999px" alt="">
            <span style="color:#fff">
                <b>Python Discord</b>
                Pixels
            </span>
        </div>
        <div slot="auth">
            <div style="padding: 1rem;margin-top: 2rem;margin-bottom: 2rem;border: 0 solid var(--tip-red);border-left-width: 4px;background: var(--dark-bg);border-radius: 1px">
                <span style="color: #E5E7EB;font-weight: bold;">
                    TIP: You can use this tool to test out some of the endpoints right inside of the docs! Why not give it a spin?
                </span>
            </div>
        </div>
    </rapi-doc>
{% endblock %}
